import { cookies, headers } from 'next/headers';
import styles from './index.module.scss';
import Banner from './components/Banner';
import Header from './components/Header';
import Footer from './components/Footer';
import { isMobile } from './utils';
import HomeTemps from './components/HomeTemps';
import Link from 'next/link';
import Image from 'next/image';
export default function Home() {
  return (
    <>
      <Header current="home" style={{ background: '#fff' }} />
      <main className={styles.main}>
        <div className={styles.container}>
          <div className={styles.section}>
            <div className={styles.left}>
              <div className={styles.title}>
                百捷简历
                <br />
                轻松打造个性化简历
              </div>

              <Link
                scroll={false}
                prefetch
                href="/content"
                className={styles.tryBtn}
                style={{ display: 'inline-block' }}
              >
                免费制作简历
                {/* <button className={styles.tryBtn}>免费制作简历 </button> */}
              </Link>
            </div>
            <Banner />
          </div>
          <HomeTemps></HomeTemps>
          <HomeTemps type="word"></HomeTemps>
          <div
            style={{
              width: '100%',
              maxWidth: '1100px',
              margin: '0 auto',
              position: 'relative',
            }}
          >
            <Link href={'/content'} className={styles.item}>
              <div className={styles.txt} style={{ paddingLeft: '20px' }}>
                <h1 className={styles.h1}>自动排版</h1>
                <div className={styles.des}>
                  您只需要按照各个模块指示填写内容，程序会根据模板样式自动排版出精美的简历。
                </div>
              </div>
              <div className={styles.pic}>
                <div className={styles.head}>
                  <span></span>
                  <span></span>
                  <span></span>
                </div>
                <Image
                  width={0}
                  height={0}
                  sizes="100vw"
                  style={{ width: '100%', height: 'auto' }}
                  alt="百捷简历"
                  src={
                    'https://resume.cjasen.com/bj_1716544218244.webp?imageView2/2/w/1400'
                  }
                />
              </div>
            </Link>
            <Link href={'/content'} className={styles.item}>
              <div className={styles.txt}>
                <h1 className={styles.h1}>全新分页算法</h1>
                <div className={styles.des}>
                  使用全新的A4分页算法，所见即所得,您不必再担心简历导出时有所误差。它能够有效地优化页面布局，这项算法都能够为您带来更加愉悦的使用体验。
                </div>
              </div>
              <div className={styles.pic}>
                <div className={styles.head}>
                  <span></span>
                  <span></span>
                  <span></span>
                </div>
                <Image
                  width={0}
                  height={0}
                  sizes="100vw"
                  style={{ width: '100%', height: 'auto' }}
                  alt="百捷简历"
                  src={
                    'https://resume.cjasen.com/bj_1716544090895.webp?imageView2/2/w/1400'
                  }
                />
              </div>
            </Link>
            <Link href={'/content'} className={styles.item}>
              <div className={styles.txt} style={{ paddingLeft: '20px' }}>
                <h1 className={styles.h1}>更多个性化设置</h1>
                <div className={styles.des}>
                  当你需要自定义模板字体大小、模块间距、文字颜色、模块排序、简历背景主题色等您可以在个性化设置中进行设置。
                </div>
              </div>
              <div className={styles.pic}>
                <div className={styles.head}>
                  <span></span>
                  <span></span>
                  <span></span>
                </div>
                <Image
                  width={0}
                  height={0}
                  sizes="100vw"
                  style={{ width: '100%', height: 'auto' }}
                  alt="百捷简历"
                  src={
                    'https://resume.cjasen.com/bj_1716544280146.webp?imageView2/2/w/1400'
                  }
                />
              </div>
            </Link>
          </div>
          <div className={styles.otherWay}>
            <Link href={'/content'} className={styles.link}>
              <div className={styles.card}>
                <Image
                  width={291}
                  height={396}
                  src="https://resume.cjasen.com/bj_1716544312952.webp"
                  alt="多端支持"
                />
              </div>
              <div className={styles.desc}>
                PC端、手机端同时支持，使用更方便
              </div>
            </Link>
            <Link href={'/content'} className={styles.link}>
              <div className={styles.card}>
                <Image
                  width={280}
                  height={396}
                  src="https://resume.cjasen.com/bj_1716544367688.webp"
                  alt="简历模板"
                />
              </div>
              <div className={styles.desc}>使用百捷简历设计的简历</div>
            </Link>
            <a href={'/content?mid=12'} className={styles.link}>
              <div className={styles.card}>
                <Image
                  width={297}
                  height={396}
                  src="https://resume.cjasen.com/bj_1716544466544.webp"
                  alt="自荐信"
                />
              </div>
              <div className={styles.desc}>使用百捷简历设计的求职信</div>
            </a>
          </div>
        </div>

        <Footer />
      </main>
    </>
  );
}
